<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/styles/iview.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/iview.min.js"></script>
    <link href="{{ url_for('static',filename='css/tests.css') }}" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>老年人心理健康评估</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h2>老年人心理健康评估
            <tag color="primary">{{ context.title }}</tag>
        </h2>
    </header>
    <main class="main">
        <div v-show="!result.show" class="topic">
            <Card :bordered="false" v-for="(item,index) in quizzes" :key="index">
                <h2 slot="title">[[ item.title ]]</h2>
                <ul style="list-style: none">
                    <li v-for="(item2,index2) in item.quizzes" style="margin: 10px">
                        <h3 style="line-height: 40px">[[ item2.title ]]</h3>
                        <radio-group v-model="item2.value">
                            <radio :label="option.value" v-for="option in options" :key="option.value">
                                [[ option.label ]]
                            </radio>
                        </radio-group>
                    </li>
                </ul>
            </Card>
            <div class="btns">
                <i-button type="warning" size="large" @click="countResult">立即提交</i-button>
            </div>
        </div>
        <div v-show="result.show" class="result">
            <h2>
                <icon type="md-checkmark-circle" size="30" color="#19be6b"></icon>
                {{ context.title }}
            </h2>
            <i-table :columns="result.columns" :data="result.data"></i-table>
            <div class="chart" id="chart" style="width: 760px;height: 300px;"></div>
            <div class="btns">
                <i-button type="info" size="large" @click="again">再测一次</i-button>
                <i-button type="success" size="large" @click="to_home">返回首页</i-button>
            </div>
        </div>
    </main>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            tid:{{ context.id }},
            quizzes: {{ context.quizzes|safe }},
            options:{{ context.options|safe }},
            result: {
                show: false,
                columns: [{
                    title: "项目",
                    key: 'title'
                }, {
                    title: "结果",
                    key: 'value'
                }],
                {#图表配置项#}
                option: {
                    series: [{
                        center: ['50%', '90%'],
                        type: 'gauge',
                        radius: '150%',
                        startAngle: 180,
                        endAngle: 0,
                        min: {{ context.result.min }},
                        max: {{ context.result.max }},
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                width: 6,
                                color: [
                                    [0.25, '#7CFFB2'],
                                    [0.5, '#58D9F9'],
                                    [0.75, '#FDDD60'],
                                    [1, '#FF6E76']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '12%',
                            width: 20,
                            offsetCenter: [0, '-60%'],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 5
                            }
                        },
                        title: {
                            offsetCenter: [0, '-20%'],
                            fontSize: 30
                        },
                        detail: {
                            fontSize: 50,
                            offsetCenter: [0, '0%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return Math.round(value) + '分';
                            },
                            color: 'auto'
                        },
                        data: [{
                            value: 0,
                            name: '',
                        }]
                    }]
                },
                data: [],
                total: 0,
                tips: '',
                lv: ''
            },
        },
        mounted: function () {
            this.myChart = echarts.init(document.getElementById('chart'));
        },
        methods: {
            {#统计结果#}
            countResult() {
                let total = 0
                for (let i = 0; i < this.quizzes.length; i++) {
                    let r = {
                        title: this.quizzes[i].title,
                        value: 0
                    }
                    for (let j = 0; j < this.quizzes[i].quizzes.length; j++) {
                        if (this.quizzes[i].quizzes[j].value === '') {
                            this.$Message.error('还未完成测试！')
                            let h = document.getElementsByClassName('ivu-card')[i].getElementsByTagName('li')[j]
                            h.scrollIntoView({behavior: 'smooth'})
                            return
                        }
                        r.value += this.quizzes[i].quizzes[j].value
                    }
                    this.result.data.push(r)
                    total += r.value
                }
                this.result.data.push({
                    title: '合计',
                    value: total
                })
                this.result.total = total
                this.result.show = true
                this.result.option.series[0].data[0].value = this.result.total
                this.myChart.setOption(this.result.option)
                if (total > 250) {
                    this.result.tips = '需要作医学上的详细检查，很可能要做针对性的心理治疗或在医生的指导下服药'
                    this.result.lv = 'error'
                } else if (total > 200) {
                    this.result.tips = '有很明显的心理问题，需要心理咨询'
                    this.result.lv = 'warning'
                } else if (total > 160) {
                    this.result.tips = '需要进一步检查'
                    this.result.lv = 'warning'
                } else {
                    this.result.tips = '正常'
                    this.result.lv = 'success'
                }
                let params = new FormData;
                params.append('result', JSON.stringify(this.result.data))
                params.append('tips', this.result.tips)
                params.append('lv', this.result.lv)
                params.append('tid', this.tid)
                axios.post('', params).then(res => {
                    console.log(res.data)
                })
            },
            {#重新测试#}
            again() {
                location.reload();
            },
            {#返回首页#}
            to_home() {
                window.location.href = '/'
            }
        }
    });
</script>
</html>
